@import '@site/src/css/fonts';

.heroBanner {
  --ifm-heading-color: #fff;

  height: 420px;
  width: auto;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: #12161b;
  background-image: url(@site/static/img/showcase/showcase-illustration.png);
  background-position-x: center;
  background-position-y: top;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom: 1px solid #202429;

  h1 {
    @include h2;
  }

  p {
    @include t1;
    font-weight: 300;
  }

  a {
    @include t2;
  }
}

.button {
  color: #ffffff;
  box-sizing: border-box;
  display: flex;
  position: relative;
  margin: auto;
  margin-top: 20px;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 45px;
  border-radius: 10px;
  border: 1px solid #000000;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  background: radial-gradient(100% 100% at 1.07% 0%, #7633e5 0%, #5d71e5 100%);

  &:focus {
    outline: none;
  }

  &--secondary {
    background-color: #7633e5;
    color: #ffffff;
    width: 500px;
  }

  &:hover {
    background: #7633e5;
    color: #ffffff;
    text-decoration: none;
  }

  a {
    color: #ffffff;
    text-decoration: none;

    @include t2;
    /* identical to box height, or 156% */
    color: #ffffff;
  }
}

@media screen and (max-width: 966px) {
  .heroBanner {
    padding: 2rem;
  }
}
